<template>
  <view class="peopleItem" v-if="detail" @click="goDetail">
    <view class="left">
      <avatar :src='setUrl(detail.avatar)' styles="width: 100rpx; height: 100rpx;"></avatar>
      <view class="desc">
        <view class="name">{{ detail.nickname }}</view>
        <view class="arrow">{{ detail.bio }}</view>
      </view>
    </view>
    <view class="right">
      <view @click.stop="followUser(detail)" v-if="userInfo.user_id != detail.user_id">
        <view class="setMarrow fish" v-if="detail.is_follow">已关注</view>
        <view class="setMarrow" v-else>关注</view>
      </view>
      <view class="his" v-if="detail.is_group_leader > 0">他的社群</view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { setUrl } from '@/common';
import { post } from '@/api';
import { useUser } from '@/store';

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
})
const userInfo = computed(() => {
  const store = useUser();
  return uni.$uv.deepClone(store.userInfo);
});

function goDetail(){
  let id = '';
  if(props.detail.user_id){
    id = props.detail.user_id
  }else{
    id = props.detail.id
  }
  uni.navigateTo({
    url: `/pages/mine/myTheme/index?id=${id}`
  });
}
// 关注
function followUser(row){
  const params = {
    follow_user_id: row.id,
    way: row.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      row.is_follow = row.is_follow == 1 ? 0 : 1;
    }
  })
}
</script>

<style lang="scss" scoped>
  .peopleItem{
    width: 100%;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      flex: 1;
      width: 0;
      display: flex;
      align-items: center;
      .desc{
        padding-left: 20rpx;
        padding-right: 60rpx;
        flex: 1;
        width: 0;
        .name{
          font-weight: 400;
          font-size: 32rpx;
          color: #2B2B2B;
          padding-bottom: 8rpx;
        }
        .arrow{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .right{
      display: flex;
      align-items: center;
      .setMarrow{
        width: 124rpx;
        height: 48rpx;
        background: #FFFFFF;
        border: 1rpx solid #E43222;
        border-radius: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #E43222;
        box-sizing: content-box;
        &.fish{
          color: #999999;
          border-color: #999999;
        }
      }
      .his{
        font-weight: 400;
        font-size: 24rpx;
        color: #E43222;
        border: 1px solid #E43222;
        border-radius: 48rpx;
        height: 48rpx;
        padding: 4rpx 10rpx;
        margin-left: 10rpx;
      }
    }
  }
</style>